<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:fragment="main_beforeFooter" id="main_beforeFooter">
    <div class="before_footer_area">
        <div class="container-fluid no_padding">
            <!--Widhet-->
            <div class="sidebar_block float_sidebar_widget">
                <div class="instagram-fee">
                    <ul class="instagram-pics instagram-size-large" id="beforeFooter_ul">
                        <!-- 循环展示前五的封面 -->
                    </ul>
                </div>
            </div>
            <!--END Widhet-->
        </div>
    </div>
    <script th:inline="javascript">
        <!--  封面的展示 Limit5ByLikeCount   -->
        $(function () {
            $.ajax({
                async:true,
                url:"/queryArticleCoverLimit5",
                type:"get",
                success:function (data) {
                    $.each(data, function (i, item) {
                        var $li = $(
                            "<li style='height: 280px;overflow: hidden;'>" +
                            "<a class=\"popupimg hover_light scrollanimation\" data-animation=\"fadeInUp\" data-timeout=\"200\" style='height: 100%' title='"+item.articleTitle+"' href='/single/"+item.articleId+"'>" +
                            "<img id='img"+i+"' style='height: 100%' src='" +item.articleCover+ "'>" +
                            "</a>" +
                            "</li>"
                            // "<li class='popupimg hover_light scrollanimation' data-animation='fadeInup' data-timeout='200' style=\"height: 280px;background-image: url("+item+");background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 100%\"></li>"
                        );
                        $("#beforeFooter_ul").append($li);
                    })
                }
            })
        })
    </script>
</div>
</body>
</html>